<script setup>
  // import { useRoutesStore } from '@/store/modules/routes'
  // import { translateTitle } from '@/utils/i18n'
  // import { isExternal } from '@/utils/validate'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  defineProps({
    layout: {
      type: String,
      default: '',
    },
  })

  // const router = useRouter()

  // const routesStore = useRoutesStore()
  // const {
  //   getTab: tab,
  //   getTabMenu: tabMenu,
  //   getRoutes: routes,
  // } = storeToRefs(routesStore)

  // const handleTabClick = () => {
  //   if (isExternal(tabMenu.value.path)) {
  //     window.open(tabMenu.value.path)
  //     setTimeout(() => {
  //       router.push('/')
  //     }, 1000)
  //   } else if (tabMenu.value) {
  //     const { redirect } = tabMenu.value
  //     router.push(redirect ? redirect : tabMenu.value)
  //   }
  // }
  const state = reactive({
    pkCorp: pkCorp,
    __pks: __pks,
  })
  const toChangePk = (e) => {
    // 切换组织
    localStorage.setItem(localStorageConfig.__pkCorp, e)
    window.location.replace(window.location.origin)
  }
</script>

<template>
  <div class="vab-nav">
    <div style="display: flex; flex-direction: row; align-items: center">
      <div class="left-panel" style="flex: 1; overflow: hidden">
        <vab-fold v-if="layout !== 'float'" />
        <vab-tabs style="width: 100%" />
      </div>
      <div class="right-panel" style="overflow: hidden">
        <el-select
          v-model="state.pkCorp"
          style="width: 120px; font-weight: bold"
          @change="(e) => toChangePk(e)"
        >
          <el-option
            v-for="item in state.__pks"
            :key="item.code"
            :disabled="state.pkCorp === item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
        <vab-notice />
        <vab-full-screen />
        <vab-refresh />
        <vab-avatar />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .vab-nav {
    position: relative;
    height: $base-nav-height;
    padding-right: $base-padding;
    padding-left: $base-padding;
    overflow: hidden;
    user-select: none;
    background: var(--el-color-white);
    box-shadow: $base-box-shadow;

    .left-panel {
      display: flex;
      align-items: center;
      justify-items: center;
      height: $base-nav-height;

      :deep() {
        .fold-unfold {
          margin-right: 12px;
        }

        .el-tabs {
          width: calc(100% - 27px);
          // margin-left: $base-margin;

          .el-tabs__header {
            margin: 0;

            > .el-tabs__nav-wrap {
              display: flex;
              align-items: center;

              .el-icon-arrow-left,
              .el-icon-arrow-right {
                font-weight: 600;
                color: var(--el-color-grey);
              }

              .el-tabs__item {
                i {
                  margin-right: 3px;
                }
              }
            }
          }
        }

        .el-tabs__nav-wrap::after {
          display: none;
        }
      }
    }

    .right-panel {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      height: $base-nav-height;
      :deep(.el-input) {
        --el-input-focus-border: #fff;
        --el-input-transparent-border: 0 0 0 0px;
        --el-input-border-color: #fff;
        --el-input-hover-border: 0px !important;
        --el-input-hover-border-color: #fff;
        --el-input-focus-border-color: #fff;
        --el-input-clear-hover-color: #fff;
        box-shadow: 0 0 0 0px !important;
        --el-input-border: 0px;
      }
      :deep(.el-select .el-input__wrapper.is-focus) {
        box-shadow: 0 0 0 0px !important;
      }
      :deep(.el-select .el-input.is-focus .el-input__wrapper) {
        box-shadow: 0 0 0 0px !important;
      }
      :deep(.el-select) {
        --el-select-border-color-hover: #fff;
      }
      :deep() {
        [class*='ri-'] {
          margin-left: $base-margin;
          color: var(--el-color-grey);
          cursor: pointer;
        }
        .el-input__inner {
          border: 0;
        }
        button {
          [class*='ri-'] {
            margin-left: 0;
            color: var(--el-color-white);
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
